<template>
    <div>
        <div v-if="myloading" class="loading">
            <van-loading size="100px" color="#ec344e" />
        </div>
        <div class="note" v-else>
            <div class="note_header">
                <div>
                    <div class="text">#一餐一食皆感恩</div>
                    <div class="text">#一餐一食皆感恩</div>
                    <div class="text">#一餐一食皆感恩</div>
                    <div class="text">#一餐一食皆感恩</div>
                    <div class="text">#一餐一食皆感恩</div>
                </div>
                <div>
                    <div class="text">#爱就是一起吃很多顿饭</div>
                    <div class="text">#一餐一食皆感恩</div>
                    <div class="text">#一餐一食皆感恩</div>
                    <div class="text">#一餐一食皆感恩</div>
                    <div class="text">#一餐一食皆感恩</div>
                </div>
            </div>
            <div class="note_bottom">
                <div class="box" v-for="(item,i) in list" :key="i">
                    <img :src="item.note?.image_u" alt="">
                    <div class="box_text">{{ item.note?.title }}</div>
                    <div class="box_bottom">
                        <div>
                            <div class="user_photo">
                                <img :src="item.note?.author?.p" alt="">
                            </div>
                            <div class="user_name">
                                {{ item.note?.author.n }}
                            </div>
                        </div>
                        <div class="love">
                            <img src="../../assets/img/collect_on.png" alt="">
                            {{ item.note?.like_count }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
    // 做网络请求，导入api
    import { note } from '../../api/index'
    
    export default {
        data(){
            return {
                datas: [],
                list:[],
                myloading: false
            }
        },
    
        // 初始化
       async created(){
            this.myloading = true;
            await note()
            .then(
                content=> {
                    console.log('--->',content.result);
                    let banners = content.result;
                    this.datas = banners;
                    this.list = banners.list;
                }
            )
            // 请求之后
            setTimeout(() => {
                // 隐藏loading 
                this.myloading = false;
            }, 500);
            // console.log(this.datas)
            // console.log(this.list)
        },
    }
</script>

<style lang="less">
    .note{
        width: 100%;
        margin-bottom: 80px;
        overflow-x: hidden;
        .note_header{
            padding: 10px;
            div{
                display: flex;
                .text{
                    background-color: #f3f9fa;
                    color: #6ea7af;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 30px;
                    font-weight: 600;
                    font-size: 12px;
                    white-space: nowrap;
                    margin-left: 10px;
                }
            }
        }

        .note_bottom{
            width: 100%;
            column-count: 2;
            .box{
                img{
                    width: 100%;
                }
                .box_text{
                    font-size: 14px;
                    font-weight: 600;
                    padding: 10px 10px 0 10px;
                }
                .box_bottom{
                    padding: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    div{
                        display: flex;
                        .user_photo{
                            img{
                                width: 15px;
                                height: 15px;
                            }
                        }
                        .user_name{
                            font-size: 12px;
                            color: #c3c3c3;
                        }
                    }
                    
                    .love{
                        font-size: 12px;
                        color: #c3c3c3;
                        img{
                            width: 15px;
                            height: 15px;
                        }
                    }
                }
            }
        }
    }

    .loading{
        width: 100%;
        margin-top: 100px;
        padding-left: 35%;
    }
</style>